﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件，找到文件所在的路径 -->
    <script src="/js/plugins/echarts/echarts.common.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom（文档对象模型） -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例（用的是原生的js，没有jQuery（可以不依赖jQuery，所以页面可以不引用jQuery）去获取对象做相关的事情）
        document.getElementById('main') // 原生js的
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据（直接拷贝 官方实例的柱状图）
        var option = {
            title: {
                text: '潜在客户报表',
                subtext: "分组类型:${groupTypeName}",
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ${xList}  // ['admin','赵一明','钱二明','王者荣耀']
            },
            series: [
                {
                    name: '潜在客户数',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: ${yList},   //[{value: 335, name: 'admin'}]
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>